<template>
  <div>
    <div class="block">
      <el-date-picker
        style="width: 400px"
        v-model="value"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="changeValue"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
    <div id="chart" style="width: 100%; height: 600px"></div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";

export default {
  data() {
    return {
       list1:[],
      bb:[],
      list:[],
      aa:[],
      array:[],
      hy:[],
      startDate:"",
      endDate:"",
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: "",
      selectedMonths: [],
    };
  },
  mounted() {
    this.renderChart();
  },
  
  methods: {
    renderChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);
      const option = {
        xAxis: {
          type: "category",
          data: this.selectedMonths,
        },
        legend:{
          data:['新增会员','预约人数','报告上传']
        },
        yAxis: {
          type: "value",
          
        },
        series: [
          {
            name:"新增会员",
            data: this.array,
            type: "line",
          },
           {
            name:"预约人数",
            data: this.list,
            type: "line",
            itemStyle: {
            color:"red"
            },
           },
          {
            name:"报告上传",
            data: this.list1,
            type: "line",
             itemStyle: {
            color:"green"
            },
          }
        ],
      };
      myChart.setOption(option);
    },
    changeValue(value) {
      this.array=[]
      this.list=[]
      this.list1=[]
      const startDate = new Date(value[0]);
      const endDate = new Date(value[1]);
      this.selectedMonths = [];

      const startYear = startDate.getFullYear();
      const endYear = endDate.getFullYear();
      const startMonth = startDate.getMonth()+1;
      const endMonth = endDate.getMonth()+1;


      for (let year = startYear; year <= endYear; year++) {

        const monthStart = year === startYear ? startMonth : 0;
        const monthEnd = year === endYear ? endMonth : 11;
        console.log(monthStart  +"==="+monthEnd)
          for (let month = monthStart; month <= monthEnd; month++) {
            this.selectedMonths.push(`${year}年${month}月`);
          }
      }
      let startMonth2=""
      if(startMonth>9){
        startMonth2=startMonth
      }else{
        startMonth2="0"+startMonth
      }

      let startYear2=startYear+"-"+startMonth2
     
      let endMonth2=""
      if(endMonth>9){
        endMonth2=endMonth
      }else{
        endMonth2="0"+endMonth
      }

      let endYear2=endYear+"-"+endMonth2

      this.renderChart();
      this.cc([startYear2,endYear2])
      this.ww([startYear2,endYear2])
      this.qq([startYear2,endYear2])
    
    },
    cc(value){
      this.array=[]
      this.axios.get("/rear/tanhytjcha",{
         params:{startYear2:value[0],endYear2: value[1]}
      })
      .then((rep) => {
          this.hy = rep.data;
       rep.data.forEach(element => {
        this.array.push(element.total)
    
       });
       this.renderChart();
      });
    },
     ww(value){
      this.list=[]
      this.axios.get("/rear/LYN/kaihytjcha",{
         params:{startYear2:value[0],endYear2: value[1]}
      })
      .then((rep) => {
          this.aa = rep.data;
       rep.data.forEach(element => {
        this.list.push(element.total)
    
       });
       this.renderChart();
      });
    },
     qq(value){
      this.list1=[]
      this.axios.get("/rear/LYN/tkhytjcha",{
         params:{startYear2:value[0],endYear2: value[1]}
      })
      .then((rep) => {
          this.bb = rep.data;
       rep.data.forEach(element => {
        this.list1.push(element.total)
    
       });
       this.renderChart();
      });
    }
  },created(){
    this.cc(["2018-1-1","2024-11-11"])
    this.ww(["2018-1-1","2024-11-11"])
    this.qq(["2018-1-1","2024-11-11"])
  }

};
</script>
<style scoped>
.block {
  text-align: center;
}
</style>